<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>指令练习</title>
		<style>
			/*为属性设置隐藏*/
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="app" v-cloak>
			<!-- 1.指令测试 v-cloak
					当浏览器解析JS完成前，用户看到的数据是{{msg}}
					直到浏览器加载完全部JS，则{{msg}}才会替换为具体的数据
					需求：不想让用户看到没有解析的数据就用：v-cloak属性-->
			测试1：测试v-cloak属性
			<h1 v-cloak>{{msg}}</h1>
			<hr>
			<!-- 2.v-text 将上述的v-cloak优化了,但是它们两个的效果都一样 -->
			测试2：测试v-text指令
			<h1 v-text="msg"></h1>
			<hr>
			<!-- 3.v-html 让浏览器解析完html后再展现-->
			测试3：测试v-html指令
			<h1><span v-html="html"></span></h1>
			<hr>
			<!-- 4.需求：只想展现{{msg}}不需要vue解析
					语法：v-pre-->
			测试4：测试v-pre指令
			<h1><span v-pre>{{msg}}</span></h1>
			<hr>
			<!-- 5.需求：元素只解析一次,之后用户随意修改，数据不变 -->
			测试5：测试v-once指令
			<h1><span v-once>{{one}}</span></h1>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<script>
			//一般工作中字符串的写法，提倡使用单引号
			const app =new Vue({
				el:"#app",
				data:{
					msg:'测试数据',
					html:'测试html语法',
					one:'数据解析1次'
				}
			})
		</script>
	</body>
</html>
